<template>
	<view>
		<!-- 自定义导航栏 -->
		<z-nav-bar transparentFixedFontColor="#000" type="transparentFixed" title="推广中心"></z-nav-bar>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="h-bg" :style="'background-image: url('+headBgImg+');'">
			<view class="h-bg-cart">
				<view class="cart" :style="'background-image: url('+hBg+');'">
					<view class="cart-price-total">
						{{ getMyTuiData.balance || 0.00 }}
					</view>
					<view class="cart-price-total-tit">
						账户余额(元)
					</view>
					<view class="cart-price flex align-item j-between">
						<view class="cart-price-left flex align-item">
							<view class="cart-price-left-tit">
								累计奖励(元)  
							</view>
							<view class="cart-price-left-num">
								{{ getMyTuiData.total_yue || 0.00 }}
							</view>
						</view>
						<view class="cart-price-right" v-if="getMyTuiData.withdrawal_btn == '1'" @click="onPageJump('/pages/my/withdrawal/withdrawal')">
							提现
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="title">
				我推荐的
			</view>
			<view class="content flex align-item">
				<view class="content-item flex align-item" @click="onPageJump('/pages/my/vip/vip')">
					<image class="content-item-icon" :src="imgUrl + 'static/web/icon/leijivip.png'" mode=""></image>
					<view class="content-item-info flex align-item column">
						<view class="content-item-info-num">
							{{ getMyTuiData.total_vip_num || 0 }}
						</view>
						<view class="content-item-info-tit">
							累计会员
						</view>
					</view>
				</view>
				<view class="content-item flex align-item" @click="onPageJump('/pages/my/vip/vip')">
					<image class="content-item-icon" :src="imgUrl + 'static/web/icon/nanvip.png'" mode=""></image>
					<view class="content-item-info flex align-item column">
						<view class="content-item-info-num">
							{{ getMyTuiData.nan_vip_num || 0 }}
						</view>
						<view class="content-item-info-tit">
							男会员数
						</view>
					</view>
				</view>
				<view class="content-item flex align-item" @click="onPageJump('/pages/my/vip/vip?type=0')">
					<image class="content-item-icon" :src="imgUrl + 'static/web/icon/nvvip.png'" mode=""></image>
					<view class="content-item-info flex align-item column">
						<view class="content-item-info-num">
							{{ getMyTuiData.nv_vip_num || 0 }}
						</view>
						<view class="content-item-info-tit">
							女会员数
						</view>
					</view>
				</view>
			</view>
			
			<view class="invitation flex" @click="onPageJump('/pages/my/invitation/invitation')">
				<view class="invitation-btn">
					立即邀请
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			imgUrl: this.$http.baseUrl, // 服务器域名
			headBgImg: this.$http.baseUrl + 'static/web/img/apply-bg.png', // 顶部背景
			hBg: this.$http.baseUrl + 'static/web/img/bg202203241830.png', // 内容背景
			getMyTuiData: [], // 存储我的推广信息
		};
	},
	onLoad(e) {
		this.getMyTuiG()
	},
	//页面显示
	onShow() {
		
	},
	onReady() {
		
	},
	// 触底触发
	onReachBottom() {
		
	},
	// 下拉刷新
	onPullDownRefresh(){
		
	},
	//方法
	methods: {
		onPageJump(url) {
			uni.navigateTo({
				url: url
			});
		},
		// 获取推广信息
		getMyTuiG(){
			var that = this
			that.$http.get('api/Member/getMyData').then(res=> {
				that.getMyTuiData = res
			})
		}
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {},
	//用户点击分享
	onShareAppMessage(e) {
		return this.wxShare();
	}
};
</script>
<style>
page {
	background-color: #fff;
}
</style>
<style lang="scss" scoped>
.flex {
	display: flex;
}
.align-item {
	align-items: center;
}
.j-between {
	justify-content: space-between;
}
.column {
	flex-direction: column;
}
.h-bg {
	width: 100%;
	padding: 196rpx 0 0;
	// #ifdef H5
	padding: 60rpx 0 0;
	// #endif
	.h-bg-cart {
		padding: 30rpx;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
		.cart {
			background-size: 100% 100%;
			box-shadow: 20rpx 20rpx 30rpx rgba($color: #7F5AFF, $alpha: .4);
			padding: 30rpx 40rpx 40rpx;
			border-radius: 24rpx;
			.cart-price-total {
				font-size: 74rpx;
				font-family: WeChat-Sans-Std-Medium, WeChat-Sans-Std;
				font-weight: 500;
				color: #FFFFFF;
			}
			.cart-price-total-tit {
				font-size: 26rpx;
				font-family: PingFangSC-Light, PingFang SC;
				font-weight: 300;
				color: #FFFFFF;
				margin-top: 13rpx;
			}
			.cart-price {
				margin-top: 32rpx;
				.cart-price-left {
					.cart-price-left-tit {
						font-size: 24rpx;
						font-family: PingFangSC-Light, PingFang SC;
						font-weight: 300;
						color: #FFFFFF;
						margin-right: 10rpx;
					}
					.cart-price-left-num {
						font-size: 30rpx;
						font-family: WeChat-Sans-Std-Medium, WeChat-Sans-Std;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
				.cart-price-right {
					width: 144rpx;
					height: 56rpx;
					background: #FFFFFF;
					border-radius: 27rpx;
					line-height: 56rpx;
					text-align: center;
					font-size: 28rpx;
					font-family: PingFangSC-Light, PingFang SC;
					font-weight: 300;
					color: #7F5AFF;
				}
			}
		}
	}
}
.main {
	padding: 0 30rpx;
	.title {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #000013;
		margin-top: 20rpx;
		margin-bottom: 10rpx;
	}
	.content {
		flex-wrap: wrap;
		.content-item {
			width: 50%;
			padding: 30rpx 0;
			.content-item-icon {
				width: 48rpx;
				height: 48rpx;
				margin-right: 54rpx;
			}
			.content-item-info {
				.content-item-info-num {
					font-size: 40rpx;
					font-family: WeChat-Sans-Std-Medium, WeChat-Sans-Std;
					font-weight: 500;
					color: #000013;
				}
				.content-item-info-tit {
					font-size: 26rpx;
					font-family: PingFangSC-Light, PingFang SC;
					font-weight: 300;
					color: #6A6A7E;
				}
			}
		}
	}
	.invitation {
		justify-content: center;
		margin-top: 180rpx;
		.invitation-btn {
			width: 82%;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			background: #7F5AFF;
			border-radius: 16rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
}
</style>
